<link rel="stylesheet" type="text/css" href="__CSS__/gonggantu.css" />
<link rel="stylesheet" type="text/css" href="__CSS__/float_window.css" />
<link rel="stylesheet" type="text/css" href="__CSS__/bootcssButtons.css" />
{include file="index/question_bank/canvas_structure_ques" /}




<!--目标用户左边浮窗-->
<div id="target_user_window" style="text-align:center;position:fixed;z-index:99;left: 1%;top: 30%;width: 185px;height:185px;border: 3px ridge;background-color: rgba(111,177,223,0.34);">


    <div style="margin-top: 15px;">
        <img id="targetUserImg" src="__IMG__/target_user_icon.png" style="width: 117px;height: 117px;">
    </div>
    <div>目标用户：<br>
        <text style="color: red;">*</text>

        <div class="tooltip">

            {if condition="$ques_info.special_flag == 'targetUser'"}
            <input class="extraInfoInput"
                   id="newTargetUser" placeholder="(请在此处填入目标用户)" value="{$targetUser}" style="background:inherit;border: none;border-bottom: 2px solid transparent;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 170px;"/>

            {else/}
            <input readonly class="extraInfoInput"
                   id="newTargetUser" value="{$targetUser}" style="background:inherit;border: none;border-bottom: 2px solid transparent;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 170px;"/>

            {/if}
        </div>

    </div>
</div>




<div style="margin-top:10px;width: 100%;text-align: center;font-size: 30px;">


    <div style="width: 130px;position: relative;margin-left: 45%;">
        共感图

        <div class="tooltip" style="width: 24px;height: 24px;position: absolute;top: 0%;left: 100%;">

            <img style="width: 24px;height: 24px;position: absolute;top: 0%;left: 0%;" src="__IMG__/explaination.png">

            <span class="tooltiptext" style="text-align:left;font-size: 14px;">用拟人化的方法，帮助我们将注意力集中在用户身上，通过收集大量信息，了解目标用户所想、所听、所见、所说，以此明确用户的痛点和需求点。
            </span>
        </div>

    </div>
</div>




<!--具体条目分块-->
<!--1.所想&所感；2.所听--><!--3.所见；4.所说&所做-->
<div class="table_row_main" style="display:table;min-height:200px;margin-left: 220px;margin-top: 10px;clear: both;">

    {volist name="types" id="t" offset="0" length="4"}

    <div class="typeBlock" id="typeBlock_{$t.id}"  >
        <div class="title">
            <text>{$t.type_name}</text>
        </div>


        <div class="msg"  id="msg_{$t.id}">
            {volist name="pre_records" id="r"}

            {if condition="$r.type_name == $t.type_name "}

                {include file="index/question_bank/canvas_template_ques" /}

            {/if}
            {/volist}
        </div>
    </div>

    {/volist}
</div>




<!--附加：痛点；需求点-->
<div id="table_row_extra" style="display:table;min-height:200px;margin-left: 220px;margin-top: 10px;">

    {volist name="types" id="t" offset="4" length="2"}

    <div class="typeBlock"  id="typeBlock_{$t.id}" >
        <div class="title" style="text-align: center;">
            <text>{$t.type_name}</text>
        </div>


        <div class="msg" style="width: 663px;" id="msg_{$t.id}">
            {volist name="pre_records" id="r"}

            {if condition="$r.type_name == $t.type_name "}

            {include file="index/question_bank/canvas_template_ques" /}

            {/if}
            {/volist}
        </div>




    </div>

    {/volist}
</div>






<!--帮助模块-->
<div class="help_block" id="help_block_1" style="position:fixed;display:none;top:30%;left:220px;width: 220px;height: 138px;">
    <text>共感图用来分析项目的目标用户，所以第一步先为目标用户取一个名字吧！</text>


    <div onclick="gonggantu_help_2()" class="help_next_step" style="">
        下一步
    </div>

    <div onclick="gonggantu_help_complete()" class="help_skip_step" style="">
        跳过
    </div>
</div>


<div class="help_block_left" id="help_block_2" style="display:none;top:300px;left:0%;width: 220px;height: 138px;">
    <text>接下来，就可以尽可能的站在用户的角度，去分析他的所思所想、所听、所见、所说所做。</text>


    <div onclick="gonggantu_help_3()" class="help_next_step" style="">
        下一步
    </div>

    <div onclick="gonggantu_help_complete()" class="help_skip_step" style="">
        跳过
    </div>
</div>

<div id="help_block_3" style="display:none;position:absolute;width:100%;height: 200px;top:1050px;left:0%;">
    <div class="help_block_left"  style="width: 220px;height: 138px;">
        <text>最后根据用户的所思所想，总结用户真正的痛点和需求点。</text>


        <div onclick="gonggantu_help_complete()" class="help_next_step" style="">
            完成
        </div>
    </div>
</div>


<script>

    //点击除输入框以外的任意位置，更改目标用户
    var oldTargetUser = '{$targetUser}';
    $(document).click(function(e){
        var _con = $('#newTargetUser');   // 设置目标区域

        var newTargetUser = $('#newTargetUser').val();

        if(!_con.is(e.target) && _con.has(e.target).length === 0){
            if(newTargetUser != oldTargetUser) {

                $.ajax({
                    type: "POST",
                    url: "__PUBLIC__/index/index/changeGonggantuUser_ques",
                    data: {
                        quesId: '{$ques_info.id}',
                        authorId: '{$_COOKIE["user"]}',
                        newTargetUser: newTargetUser
                    },
                    success: function (result) {
                        oldTargetUser = newTargetUser;

                        toastr.info('目标用户修改已自动保存~');
                        setTimeout(function () {
                            toastr.clear();
                        }, 4000);
                        //console.log(result);
                        //window.location.reload();
                    }
                });
            }
        }
    });




    //画布的  信息上边栏  随滚动条移动自动到达屏幕顶端
    var _box_y = $("#work_top_window").offset().top;
    $(window).scroll(function(){
        if($(window).scrollTop() > _box_y){
            $("#work_top_window").css("top",$(window).scrollTop()+"px");
            $("#work_top_window").css("z-index",101);
        }else{
            $("#work_top_window").css("top",_box_y);
        }
    });


    function gonggantu_help_1() {

        $('#cover').css('display','block');
        $('#cover').css('height','100%');

        $('#target_user_window').css('z-index',999);
        $('#help_block_1').show();
        $('#help_block_1').css('z-index',999);
    }

    function gonggantu_help_2() {

        $('html,body').animate({scrollTop: 0}, 1000, null,function () {
            $('#cover').css('display', 'block');
            $('#cover').css('height', '100%');

            $('#target_user_window').css('z-index', 99);
            $('#help_block_1').hide();

            //$('.table_row_main').css('z-index',102);
            $('#help_block_2').show();
            $('#help_block_2').css('z-index', 999);
        })
    }


    function gonggantu_help_3() {
        //window.scrollTo(0,document.body.scrollHeight);
        var top_tmp = $('#table_row_extra').offset().top;

        $('html,body').animate({scrollTop: top_tmp}, 1000, null,function () {
            $('#cover').css('display','block');
            $('#cover').css('height','100%');

            $('#help_block_2').hide();


            $('#help_block_3').show();
            $('#help_block_3').css('top',top_tmp);
            $('#help_block_3').css('z-index',999);
        });

    }


    function gonggantu_help_complete() {
        $('#cover').hide();
        $('#help_block_1').hide();
        $('#help_block_2').hide();
        $('#help_block_3').hide();
        $('#target_user_window').css('z-index',99);
    }

    setTimeout(function () {
        var allText = $(".record_area");

        //console.log(allText);
        for (var i = 0; i < allText.length; i++) {
            autoTextarea(allText[i]);// 调用
        }
    }, 0);



    var crtRecordId = 0;

    // 防抖
    var debounce = (function () {
        var timeout = null;
        return function() {
            if(timeout !== null){
                clearTimeout(timeout);
            }
            timeout = setTimeout(function () {
                editRecord(window.crtRecordId);
            }, 1000);
        }
    })();

    //调用后台编辑函数；更改字数统计div；广播新内容
    function onkeyupForTextarea(recordId){
        var id = "record_" + recordId;

        this.crtRecordId = recordId;
        //不需要显示edit按钮了
        //$('#'+id).next().children('.edit_btn').show();


        // 触发防抖函数(editRecord)
        debounce();


        var newContent = $('#'+id).val().length + "/50";
        $('#text_count_' + recordId).html(newContent );


    }

    function editRecord( record_id){
        var value = $('#record_'+ record_id).val();

        $('#auto_save').text('自动保存中...');

        //insert into database

        $.ajax({
            type:"POST",
            url:"__PUBLIC__/index/index/editQuesRecord",
            data: {
                preId: record_id,
                newRecord: value,
                userId:"{$_COOKIE['user']}"
            },
            success:function (result) {
                setTimeout(function () {
                    $('#auto_save').text('√自动保存成功');
                }, 1000);



            }
        })
    }


    /**
     * 文本框根据输入内容自适应高度
     * @param                {HTMLElement}        输入框元素
     * @param                {Number}                设置光标与输入框保持的距离(默认0)
     * @param                {Number}                设置最大高度(可选)
     */
    var autoTextarea = function (elem, extra, maxHeight) {
        extra = extra || 0;
        var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
            isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
            addEvent = function (type, callback) {
                elem.addEventListener ?
                    elem.addEventListener(type, callback, false) :
                    elem.attachEvent('on' + type, callback);
            },
            getStyle = elem.currentStyle ? function (name) {
                var val = elem.currentStyle[name];

                if (name === 'height' && val.search(/px/i) !== 1) {
                    var rect = elem.getBoundingClientRect();
                    return rect.bottom - rect.top -
                        parseFloat(getStyle('paddingTop')) -
                        parseFloat(getStyle('paddingBottom')) + 'px';
                };

                return val;
            } : function (name) {
                return getComputedStyle(elem, null)[name];
            },
            minHeight = parseFloat(getStyle('height'));

        elem.style.resize = 'none';

        var change = function () {
            var scrollTop, height,
                padding = 0,
                style = elem.style;

            if (elem._length === elem.value.length) return;
            elem._length = elem.value.length;

            if (!isFirefox && !isOpera) {
                padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
            };
            //scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

            elem.style.height = minHeight + 'px';
            if (elem.scrollHeight > minHeight) {
                if (maxHeight && elem.scrollHeight > maxHeight) {
                    height = maxHeight - padding;
                    style.overflowY = 'auto';
                } else {
                    height = elem.scrollHeight - padding;
                    style.overflowY = 'hidden';
                };
                style.height = height + extra + 'px';
                //scrollTop += parseInt(style.height) - elem.currHeight;
                //document.body.scrollTop = scrollTop;
                //document.documentElement.scrollTop = scrollTop;
                elem.currHeight = parseInt(style.height);
            };
        };

        addEvent('propertychange', change);
        addEvent('input', change);
        addEvent('focus', change);
        change();
    };

</script>

<style>
    .canvas_template_div{
        margin:30px 0 10px 30px;
    }

    .flag_importance_line{
        height: 110px;
    }
</style>